import React, {useEffect, useState,useContext} from 'react';
import {Row, Col, PageHeader, Button, Image, Avatar, Tooltip, Tabs, List, message, Space} from 'antd';
import {
    CalendarOutlined,
    UserOutlined,
    AntDesignOutlined,
    StarFilled,
    StarOutlined, LikeFilled, LikeOutlined, MessageOutlined, RetweetOutlined, EditOutlined,
    IdcardOutlined,ManOutlined,WomanOutlined
} from '@ant-design/icons';
import style from"./index.module.css"
import {post} from "../../utils/post";
import {get} from "../../utils/get";
import {PostMessage} from "../indexMain/postComponent";
import Editor from "../editor/editor";
import birth from "../../assets/img/birth.png"
import {IndexContext} from "../../pages/Index"
const {TabPane}=Tabs
/**
 *  用户详情页
 *
 *  获取指定ID用户的信息
 */
const User=(props)=> {
    const [page,changePage] =useState(1);
    const [total,setTotal] = useState(0);
    const[data,changeData]=useState([])
    const[userInfo,changeUserInfo]=useState([])
    const [show,changeShow]=useState(false)
    const [editContent,setEditContent]=useState({})
    const [editorShow,setEditorShow]=useState(false)
    const {info,setInfo} = useContext(IndexContext)
    // const {user} = props.match.params
    const isMine=props.location.state?true:false;
    const getUserInfo = ()=>{
        const userUid = JSON.parse(localStorage.getItem('USERDATA')).userUid
        get(`/sysuser/info?userUid=${userUid}`).then(res=>{
            if(res.data.code===0)
            changeUserInfo(res.data.data);
            else message.error(res.data.errorMsg);
        })
    }
    const getUserShare = (page)=>{
        const token = localStorage.getItem('TOKEN')
            get(`/share/my?page=${page}&limit=${10}`, token).then(res=>{
                if(res.data.code===0)
                {
                    setTotal(res.data.page.totalCount)
                    changeData(res.data.page.list)
                }
            })
    }
    useEffect(()=>{
        getUserInfo();
    },[])
    useEffect(()=>{
        if (isMine){//是用户本人
            getUserShare(page);
        }
    },[page])
    const IconText = ({ icon, text }) => (
        <Space>
            {React.createElement(icon)}
            {text}
        </Space>
    );
    function handleChange (e){
        changePage(e);
    }
    const jump = (shareID)=>{
        props.history.push(`/index/detail/${shareID}`)
    }
    const myTime=(time)=>{
        return time?.substring(0,10)+" "+time?.substring(11,19);
    }
    const editShare=(content,shareId,images)=>{
        setEditContent({content:content,shareId:shareId,images:images})
        changeShow(true)
            // console.log(editContent,"content");
    }
    const renderGender=(gender)=>{
        let arr = ['是个人类',<ManOutlined/>,<WomanOutlined />]
        return <span className={style.gender}>性别：{arr[gender]}</span>;
    }
    const UserMain =()=>{
        const{nickname,avatar,gender,createTime,profile,birthDate}=userInfo;
    return(
        <div>
            {/*用户背景图*/}
            <Image
                className={style.background}
                src="http://baiblog.oss-cn-guangzhou.aliyuncs.com/2022-05-19/1652939161168.jpg"
            />
            {/*用户头像 用户名等各种信息*/}
            <div className={style.userBox}>
                <Avatar
                    size={120}
                    src={avatar}
                    className={style.avatar}
                />
                <Button className={style.follow} shape="round" onClick={()=>{message.info('敬请期待')}}>关注</Button>
                <Button  shape="circle" className={style.more} onClick={()=>{setEditorShow(true)}}>
                <EditOutlined />
                </Button>
                <div className={style.userinfo}>
                    <div className={style.username}>
                        {nickname}
                    </div>
                    <div className={style.birth}>
                    <img src={birth}/><span className={style.infoItem}>{birthDate}</span>
                    {
                        renderGender(gender)
                    }
                    </div>
                    <div>
                        个人简介：{profile}
                    </div>
                    <div>
                        <CalendarOutlined /><span className={style.infoItem}> {createTime} 加入</span>
                    </div>
                    <div className={style.followData}>
                        <span style={{'fontWeight':'bold'}}>0</span>
                        <span>Following</span>
                        <span style={{'fontWeight':'bold'}}>0</span>
                        <span >Followers</span>
                    </div>
                    <div>
                        <Avatar.Group
                            maxCount={2}
                            maxPopoverTrigger="click"
                            size="large"
                            maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf', cursor: 'pointer' }}
                        >
                            <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                            <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
                            <Tooltip title="Ant User" placement="top">
                                <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
                            </Tooltip>
                            <Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />
                        </Avatar.Group>
                        <span>Followed by xxx and xxx</span>
                    </div>
                </div>
            </div>
            <Tabs className={style.userBoxBtm} activeKey={page} onChange={handleChange}>
                <TabPane tab="我的分享" key="1" >
                </TabPane>
            </Tabs>
        </div>
    )
}

    return (
        <div>
            <PageHeader
                className={style.header}
                onBack={() =>{props.history.push('/index')}}
                title={userInfo.nickname}
                subTitle={`共${total}条分享`}
            />
            <UserMain></UserMain>
            <List className={`${style.body}`}
                  bordered={true}
                  size ="small"
                  pagination={{
                      pageSize: 10,
                      total:total,
                      onChange:(page)=>{
                          changePage(page);
                      }

                  }}
                  dataSource={data}
                  renderItem={item => {
                      const{favorCount,likeCount,content,commentCount,isLike,isFavor,shareId,nickname,avatar,updateTime,images} =item
                      return(
                          <List.Item className={`${style.bodyItem}`} key={shareId}>
                              <List.Item.Meta className={`${style.meta}`}
                                              avatar={<Avatar src={avatar} />}
                                              title={<a>{nickname}</a>}
                              />
                              <p className={style.time} onClick={()=>jump(shareId)}>{myTime(updateTime)}</p>
                              <EditOutlined onClick={()=>editShare(content,shareId,images)}/>
                              <div className={style.content} onClick={()=>jump(shareId)}>
                                  {content}
                              </div>
                              <Row className={style.image}>
                                  {
                                      images&&images.map((value,key) => {
                                          return(
                                              <Col className="gutter-row" key={key} span={8}>
                                                  <Image
                                                      className={`${style.img}`}
                                                      key={key}
                                                      width={160}
                                                      height={160}
                                                      alt="照片"
                                                      src={value}
                                                  />
                                              </Col>
                                          )
                                      })
                                  }
                              </Row>
                              {/*点赞转发一栏*/}
                              <div className={style.action}>
                                  <Row>
                                      <Col className="gutter-row" span={6}>
                                          {
                                              isFavor? (<StarFilled style={{color:'#ffd75a'}}/>):(<StarOutlined/>)
                                          }
                                          <span>{favorCount}</span>
                                      </Col>
                                      <Col className="gutter-row" span={6}>
                                          {
                                              isLike?(<LikeFilled style={{color:'#0170fe'}} />):(<LikeOutlined/>)
                                          }
                                          <span>{likeCount}</span>
                                      </Col>
                                      <Col className="gutter-row" span={6}>
                                          <IconText icon={MessageOutlined} text={commentCount} key="list-vertical-message" />
                                      </Col>
                                      <Col className="gutter-row" span={6}>
                                          <IconText icon={RetweetOutlined} text={0} key="list-vertical-upload"/>
                                      </Col>
                                  </Row>
                              </div>
                          </List.Item>
                      )}
                  }
            />
            <PostMessage show={show} page={page} update={(page)=>getUserShare(page)} editContent={editContent} changeShow={(value)=>changeShow(value)}/>
            <Editor setInfo={(data)=>setInfo(data)} isShow={editorShow} changShow={(value) => setEditorShow(value)} update={()=>getUserInfo()} ></Editor>
        </div>
    );
}

export default User;
